<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <el-descriptions
            class="margin-top"
            title="业务参数配置"
            :column="3"
            :size="size"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  域名
                </div>
              </template>
              <el-input v-model="configForm.domainUrl" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <iphone />
                  </el-icon>
                  客服飞机号
                </div>
              </template>
              <el-input v-model="configForm.customerServiceTelegram" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  客服QQ
                </div>
              </template>
              <el-input v-model="configForm.customerServiceQq" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <Postcard />
                  </el-icon>
                  货币类型
                </div>
              </template>
              <el-input v-model="configForm.settleCurrencyType" placeholder="请输入usdt或cny" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <Postcard />
                  </el-icon>
                  货币费率
                </div>
              </template>
              <el-input v-model="configForm.settleCurrencyRate" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <Postcard />
                  </el-icon>
                  货币单位
                </div>
              </template>
              <el-input v-model="configForm.settleCurrencyUnit" placeholder="u或元" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  下发钱包地址
                </div>
              </template>
              <el-input v-model="configForm.withdrawalWallet" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <office-building />
                  </el-icon>
                  充值钱包地址
                </div>
              </template>
              <el-input v-model="configForm.rechargeWallet" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <Wallet />
                  </el-icon>
                  在线客服URL
                </div>
              </template>
              <el-input v-model="configForm.customerServiceUrl" />
            </el-descriptions-item>
          </el-descriptions>
          <el-divider content-position="center"><span style="color: red">请定期检查，避免被非法篡改</span></el-divider>
          <el-row :gutter="20">
            <el-col :span="12" :offset="11">
              <div class="grid-content ep-bg-purple" />
              <el-button type="primary"  @click="saveForm">保存</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="securityDialog.title" v-model="securityDialog.visible" :show-close="false" :close-on-click-modal="false" width="500px" append-to-body>
      <el-card>
        <span>
          谷歌验证码:
          <el-input v-model="googleAuthCode" placeholder="请输入谷歌驗證碼" clearable style="width: 240px" />
        </span>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="doSubmit">确认提交</el-button>

        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import type { ComponentSize } from 'element-plus'
import {listBizConfig, updateBizConfig} from "@/api/retail/bizConfig";
import {appealPayOrder} from "@/api/retail/payOrder";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const size = ref<ComponentSize>('default')
const configForm = ref({
  domainUrl: '',
  customerServiceTelegram: '',
  customerServiceQq: '',
  withdrawalWallet: '',
  rechargeWallet: '',
  customerServiceWx: '',
  settleCurrencyType: '',
  settleCurrencyUnit: '',
  settleCurrencyRate: 0
});
const buttonLoading = ref(false);
const securityDialog = reactive<DialogOption>({
  visible: false,
  title: '谷歌验证码',
});
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const googleAuthCode = ref('');
const getAllConfigs = () => {
  listBizConfig().then(res=>{
    Object.assign(configForm.value,res.data)
  });
}
const saveForm = () => {
  securityDialog.title = "谷歌验证码";
  securityDialog.visible = true;
}

const doSubmit = () => {

  buttonLoading.value = true;
  updateBizConfig(configForm.value,googleAuthCode.value)
    .then(res =>{
      if(res.code==200) {
        proxy?.$modal.msgSuccess("保存成功");
      }else{
        proxy?.$modal.msgError("保存失败:"+res.msg);
      }
    })
    .finally(()=>{
    buttonLoading.value = false;
    securityDialog.visible = false;
    googleAuthCode.value = '';
  });


}

onMounted(() => {
  getAllConfigs();
})
</script>
